<template>
  <div style="width: 800px; height: 500px;margin: 0 auto;">
    <div id="container"></div>
  </div>
</template>

<script>
import G6 from '@antv/g6'
export default {
  name: 'View2',
  data () {
    return {
      graph: null,
      nodes: [],
      edges: [],
      grid: null // Grid 网格
    }
  },
  mounted () {
    this.initGraph()
  },
  methods: {
    async initGraph () {
      // 实例化 grid 插件
      this.grid = new G6.Grid()
      // 实例化图
      this.graph = new G6.Graph({
        container,
        width: 800,
        height: 500,
        // layout: {
        //   type: 'layoutName'
        // },
        layout: {
          type: 'grid',
          rankdir: 'LR',
          align: 'DL',
          nodesepFunc: () => 50,
          ranksepFunc: () => 50
        },
        plugins: [this.grid], // 将 grid 实例配置到图上
        modes: {
          default: [
            {
              type: 'drag-canvas', // 拖拽画布
              // enableOptimize: true // 是否开启优化，开启后拖动画布过程中隐藏所有的边及节点上非 keyShape 部分，默认关闭
            },
            {
              type: 'zoom-canvas', // 缩放画布
              // enableOptimize: true,
              // optimizeZoom: 0.9 // 当 enableOptimize 为 true 时起作用，默认值为 0.7，表示当缩放到哪个比例时开始隐藏非 keyShape
            }
          ]
        }
      })
      // const { data: res } = await this.Api.get('/adp/adp/sql/getSqlBlood', { params: { taskId: 897, distance: '', direction: '' } })
      // this.nodes = res.data.filter(item => item.shape === 'er-rect')
      // this.edges = res.data.filter(item => item.shape === 'edge')
      console.log(this.nodes)
      console.log(this.edges)
      let nodes = []
      let edges = []
      for (let i = 0; i < 1000; i++) {
        nodes.push({ label: i.toString(), id: i.toString() })
      }
      for (let i = 0; i < 900; i++) {
        edges.push({ source: i.toString(), target: (i + 1).toString() })
      }
      this.graph.data({ nodes: nodes, edges: edges }) // 读取数据源到图上
      this.graph.render() // 渲染图

      // 自定义布局
      // G6.registerLayout('layoutName', {
      //   /**
      //    * 定义自定义行为的默认参数，会与用户传入的参数进行合并
      //   */
      //   getDefaultCfg () {
      //     return {}
      //   },
      //   /**
      //    * 初始化
      //    * @param {Object} data 数据
      //   */
      //   init (data) {
      //     const self = this
      //     self.nodes = data.nodes
      //     self.edges = data.edges
      //   },
      //   /**
      //    * 执行布局
      //   */
      //   execute () {
      //     // TODO
      //   },
      //   /**
      //    * 根据传入的数据进行布局
      //    * @param {Object} data 数据
      //   */
      //   layout (data) {
      //     const self = this
      //     self.init(data)
      //     self.execute()
      //   },
      //   /**
      //    * 更新布局配置，但不执行布局
      //    * @param {Object} cfg 需要更新的配置项
      //   */
      //   updateCfg (cfg) {
      //     const self = this
      //     Util.mix(self, cfg)
      //   },
      //   /**
      //    * 销毁
      //   */
      //   destroy () {
      //     const self = this
      //     self.position = null
      //     self.nodes = null
      //     self.edges = null
      //     self.destroyed = true
      //   }
      // })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
